import { useEffect } from 'react'

// 导入数据请求的方法
import { getBannerListData, getProListData } from './api/home'

import { changeBannerList, changeProList } from './store/modules/home'

// useDispatch 用来触发修改函数的
// useSelector 是用来获取数据的
import { useDispatch, useSelector } from 'react-redux'

export default function Home() {

    // 获取修改数据的方法 dispatch
    const dispatch = useDispatch()

    // 获取全局数据
    const bannerList = useSelector(state => state.home.bannerList)
    const proList = useSelector(state => state.home.proList)

    useEffect(() => {
        // console.log('挂载阶段直接');
        getBannerListData().then(res => {
            // console.log(res.data.data);
            // 修改数据
            dispatch(changeBannerList(res.data.data))
        })

        getProListData({ limitNum: 5 }).then(res => {
            // console.log(res.data.data);
            dispatch(changeProList(res.data.data))
        })

    }, [])



    const proHtml = proList && proList.map(item => {
        return <li key={item.proid}>
            {item.proname}
        </li>
    })

    return (
        <div>
            {bannerList && bannerList.map(item => {
                return <img style={{ width: 150 }} key={item.bannerid} src={item.img} alt="" />
            })}
            <ol>
                {proHtml}
            </ol>
        </div>
    )
}
